<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
    <script src="../../js/common.js"></script>
    <script src="../../js/index.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../js/validate.js"></script>
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../plugins/element-ui/index.js"></script>
    <script src="../../plugins/vue/vue.js"></script>
    <script src="echarts.js"></script>

</head>
<body>
<div id="app">
    <!--日期选择-->
   <!-- <div class="block">
        <span class="demonstration">查询日期</span>
        <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="fetchData()"
        >
        </el-date-picker>
    </div>-->
    <div class="block">
        <span class="demonstration">查询日期</span>
        <el-date-picker
                v-model="value1"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="fetchData()"
        >
        </el-date-picker>
        <hr color="gold">

        <div id="main" style="width: 1200px;height:400px;"></div>
        <hr color="gold">
    </div >
    <!--表格-->
    <el-table
            :data="tableData"
            border
            style="width: 100%; ">
        <el-table-column
                prop="name"
                label="菜品名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="number"
                label="销售数量"
                width="180">
        </el-table-column>
        <el-table-column
                prop="amount"
                label="销售金额"
                width="180"  >
        </el-table-column>
        <el-table-column
                label="销售量占比"
                width="180"  >
            <template slot-scope="scope">{{(scope.row.number/totalNumber * 100).toFixed(0)}}%</template>
        </el-table-column>
        <el-table-column
                label="销售额占比"
                width="180"  >
            <template slot-scope="scope">{{(scope.row.amount/totalAmount * 100).toFixed(0)}}%</template>
        </el-table-column>
    </el-table>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../api/login.js"></script>

  <script>
      new Vue({
          el:'#app',
          data(){
              return{
                  pickerOptions: {
                      shortcuts: [{
                          text: '最近一周',
                          onClick(picker) {
                              const end = new Date();
                              const start = new Date();
                              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                              picker.$emit('pick', [start, end]);
                          }
                      }, {
                          text: '最近一个月',
                          onClick(picker) {
                              const end = new Date();
                              const start = new Date();
                              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                              picker.$emit('pick', [start, end]);
                          }
                      }, {
                          text: '最近三个月',
                          onClick(picker) {
                              const end = new Date();
                              const start = new Date();
                              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                              picker.$emit('pick', [start, end]);
                          }
                      }]
                  },

                  tableData: [],
                  daterange:[],
                  value1: ['2022-01-01 00:00:00','2022-12-31 00:00:00'],
                  totalNumber:0,
                  totalAmount:0
              }
          },
          created(){
              this.fetchData()
          },
          methods:{
              fetchData(){

                  let start = this.value1[0]
                  let end = this.value1[1]
                  axios.get("/order/count?startTime=" +start+"&endTime="+end).then(res =>{
                      //清空数据
                      this.tableData = [];
                      this.totalNumber = 0;
                      this.totalAmount = 0;
                      var amount = 0
                      for (let i = 0; i < res.data.data.length; i++) {
                          var dish = res.data.data[i];
                          var number = dish.number;
                          this.totalNumber += number
                          amount = dish.amount * number
                          this.totalAmount += amount
                          dish.amount = amount
                          this.tableData.push(dish)
                      }

                      let numData = [];
                      let moneyData = [];
                      let totalMoney = 0;
                      for (let i = 0; i < res.data.data.length; i++) {
                          let dish = res.data.data[i];
                          numData.push({value:dish.number , name : dish.name})
                          totalMoney = dish.number * dish.amount
                          moneyData.push({value: totalMoney, name : dish.name})
                      }

                      //创建饼图
                      var myChart = echarts.init(document.getElementById('main'));
                      option = {
                          title: {
                              text: '菜品销售前十统计表',
                              subtext: 'Fake Data',
                              left: 'center'
                          },
                          tooltip: {
                              trigger: 'item'
                          },
                          legend: {
                              orient: 'vertical',
                              left: 'left'
                          },
                          series: [
                              {
                                  name: '销售量统计',
                                  type: 'pie',
                                  radius: '50%',
                                  center:['40%','50%'],
                                  data:numData,
                                  emphasis: {
                                      itemStyle: {
                                          shadowBlur: 10,
                                          shadowOffsetX: 0,
                                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                                      }
                                  }
                              },    {
                                  name: '销售额统计',
                                  type: 'pie',
                                  radius: '50%',
                                  center:['80%','50%'],
                                  data:moneyData,
                                  emphasis: {
                                      itemStyle: {
                                          shadowBlur: 10,
                                          shadowOffsetX: 0,
                                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                                      }
                                  }
                              }
                          ]
                      };
                      myChart.setOption(option);
                  })
              }
          },
      })
  </script>
</body>
</html>